<!DOCTYPE html>
<html>

	<head>
		<title>上传头像裁剪</title>
		<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
		<meta http-equiv="description" content="this is my page">
		<meta http-equiv="content-type" content="text/html; charset=UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<link rel="stylesheet" href="css/bootstrap.min.css">
		<link rel="stylesheet" href="css/cropper.css">
		<link rel="stylesheet" href="css/myCrop.css">
	</head>

	<body style="margin: auto;text-align: center;">
		<section style="margin-top: 50px;">
			<input id="photoBtn" type="button" onclick="document.getElementById('inputImage').click()" value="选择照片">
			<!-- 可以增加自己的样式 -->
			<input id="inputImage" type="file" accept="image/*" onchange="imgChange(event)" )/>
			<br/>
			<img id="showImg" style="width: 358px;height: 441px;" />
		</section>

		<div class="container" style="padding: 0;margin: 0;position:fixed;display: none;top: 0;left: 0;z-index: 200;" id="containerDiv">
			<div class="row" style="display: none;" id="imgEdit">
				<div class="col-md-9">
					<div class="img-container">
						<img src="" alt="Picture">
					</div>
				</div>
			</div>
			<div class="row" id="actions" style="padding: 0;margin: 0;width: 100%;position: fixed;bottom: 5px;">
				<div class="col-md-9 docs-buttons">
					<div class="btn-group">
						<button type="button" class="btn btn-primary" data-method="destroy" title="Destroy" style="height: auto;">
	            <span class="docs-tooltip" data-toggle="tooltip" >
	              <span class="fa fa-power-off" >取消</span>
	            </span>
	          </button>
					</div>

					<div class="btn-group btn-group-crop " style="float: right;">
						<button type="button" class="btn btn-primary" id="imgCutConfirm" data-method="getCroppedCanvas" data-option="{ &quot;width&quot;: 320, &quot;height&quot;: 180 }" style="height: auto;margin-right: 17px;">
	            <span class="docs-tooltip" data-toggle="tooltip" title="">确认</span> <!--cropper.getCroppedCanvas({ width: 320, height: 180 }) -->
	          </button>
					</div>

				</div>
				<!-- /.docs-buttons -->
			</div>
		</div>

		<!-- 预览 -->
		<div class="modal fade docs-cropped" id="getCroppedCanvasModal" style="display: none" role="dialog" aria-hidden="true" aria-labelledby="getCroppedCanvasTitle" tabindex="-1">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
						<h4 class="modal-title" id="getCroppedCanvasTitle">预览</h4>
					</div>
					<div class="modal-body"></div>
					<div class="modal-footer">
						<button type="button" class="btn btn-default" data-dismiss="modal" style="height: auto;">取消</button>
						<a class="btn btn-primary" id="imgCutConfirm" href="javascript:void(0);" style="height: auto;">确认</a>
					</div>
				</div>
			</div>
		</div>
		<!-- /.预览 -->
		<div class="mui-input-row" style="text-align: center;">
			<button id="btn1" class="btnstyle" onclick="submitForm()">确定</button>
		</div>
	</body>
	<script type="text/javascript" src="js/jquery.min.js"></script>
	<script type="text/javascript" src="js/exif.js"></script>
	<script type="text/javascript" src="js/bootstrap.min.js"></script>
	<script type="text/javascript" src="js/cropper.js"></script>
	<script type="text/javascript" src="js/myCrop.js?v=1.0.4"></script>
	<script type="text/javascript">
		var fileImg = "";

		//		document.getElementById("showImg").addEventListener('load', function() {
		//			// once the image is loaded:
		//			var width = document.getElementById("showImg").naturalWidth; // this will be 300
		//			var height = document.getElementById("showImg").naturalHeight; // this will be 400
		//			//			someContext.drawImage(img, 0, 0, width, height);
		//			alert(width+"he="+height)
		//		}, false);
		$(function() {

			$("#imgCutConfirm").bind("click", function() {
				$("#containerDiv").hide();
				$("#imgEdit").hide();
				$("#getCroppedCanvasModal").modal("hide");
			})
		})

		//提交表达
		function submitForm() {
			////压缩图片成固定大小
			alert("fileimg" + fileImg)

			$("#registerForm").attr("enctype", "multipart/form-data");

			var formData = new FormData($("#registerForm")[0]);
			formData.append("imgBase64", encodeURIComponent(fileImg)); //
			alert("formData=" + encodeURIComponent(fileImg));
			alert(fileImg)
			var iii = document.getElementById("showImg");
			alert(iii.width + "height=" + iii.height)

			$.ajax({
				url: "",
				type: 'POST',
				data: formData,
				timeout: 10000, //超时时间设置，单位毫秒
				async: true,
				cache: false,
				contentType: false,
				processData: false,
				success: function(result) {
					alert("success")
				},
				error: function(returndata) {
					Alert.closedLoading();
				}
			});
		}

		function imgChange(e) {
			alert();
			var dom = $("input[id^='inputImage']")[0];
			var photoExt = dom.value;
			if(!/.(gif|jpg|jpeg|png|GIF|JPG|png|BMP|bmp)$/.test(photoExt)) { //判断上传图片是否符合格式
				alert('上传图片格式不正确，请重新上传!');
				return false;
			}
			var isIE = /msie/i.test(navigator.userAgent) && !window.opera;
			if(isIE && !dom.files) {
				var filePath = dom.value;
				var fileSystem = new ActiveXObject('Scripting.FileSystemObject');
				var file = fileSystem.GetFile(filePath);
				fileSize = file.Size;
			} else {
				fileSize = dom.files[0].size;
			}
			fileSize = Math.round(fileSize / 1024 * 100) / 100;
			alert(fileSize)
			if(fileSize >= 100) {
				dialogMsg('照片最大尺寸大于100k，请重新上传!');
				return false;
			}
			var reader = new FileReader();
			reader.onload = (function(file) {
				return function(e) {
					imgbase64 = this.result;
					w = imgbase64.indexOf(",");
					var BasePic = imgbase64.substring(w + 1, imgbase64.length); //获取base64头部
					$("#inputImage")[0].src = this.result; //给页面中的img赋值

				};
			})(e.target.files[0]);
			reader.readAsDataURL(e.target.files[0]);
		}
	</script>

</html>